<template>
  <table-page
    ref="tablePageRef"
    title="字典列表"
    :search-config="searchConfig"
    :columns="tableConfig"
    :data="tableData"
    :loading="loading"
    :pagination-config="paginationConfig"
    :form-config="formConfig"
    :default-form-data="defaultFormData"
    @search="handleSearch"
    @reset="handleSearch"
    @selection-change="handleSelectionChange"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @add="handleAdd"
    @edit="handleEdit"
    @delete="handleDelete"
    @batch-delete="handleBatchDelete"
  />
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import TablePage from '@/components/TablePage/index.vue'
import { searchConfig, tableConfig } from './config/pageConfig'
import { formConfig, getDefaultFormData } from './config/formConfig'

// 状态定义
const tablePageRef = ref(null)
const loading = ref(false)
const tableData = ref([
  {
    id: '1',
    name: '性别',
    code: 'gender',
    description: '用户性别选项',
    sort: 1,
    status: '1',
    createTime: '2024-01-01 12:00:00'
  },
  {
    id: '2',
    name: '学历',
    code: 'education',
    description: '教育程度选项',
    sort: 2,
    status: '1',
    createTime: '2024-01-01 12:00:00'
  },
  {
    id: '3',
    name: '职位',
    code: 'position',
    description: '工作职位选项',
    sort: 3,
    status: '0',
    createTime: '2024-01-01 12:00:00'
  }
])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100
})

// 分页配置
const paginationConfig = computed(() => ({
  total: pagination.total,
  currentPage: pagination.currentPage,
  pageSize: pagination.pageSize,
  pageSizes: [10, 20, 30, 50]
}))

// 默认表单数据
const defaultFormData = getDefaultFormData()

// 方法定义
const handleSearch = (params = {}) => {
  console.log('搜索条件：', params)
  // TODO: 实现搜索逻辑
}

const handleSelectionChange = (rows) => {
  console.log('选中行：', rows)
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  handleSearch()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  handleSearch()
}

const handleAdd = async (data) => {
  try {
    loading.value = true
    // TODO: 调用新增API
    console.log('新增字典：', data)
    
    ElMessage.success('新增成功')
    handleSearch()
  } catch (error) {
    console.error(error)
    ElMessage.error('新增失败')
  } finally {
    loading.value = false
  }
}

const handleEdit = async (data) => {
  try {
    loading.value = true
    // TODO: 调用编辑API
    console.log('编辑字典：', data)
    
    ElMessage.success('保存成功')
    handleSearch()
  } catch (error) {
    console.error(error)
    ElMessage.error('保存失败')
  } finally {
    loading.value = false
  }
}

const handleDelete = async (row) => {
  try {
    loading.value = true
    // TODO: 调用删除API
    console.log('删除字典：', row)
    
    ElMessage.success('删除成功')
    handleSearch()
  } catch (error) {
    console.error(error)
    ElMessage.error('删除失败')
  } finally {
    loading.value = false
  }
}

const handleBatchDelete = async (rows) => {
  try {
    loading.value = true
    // TODO: 调用批量删除API
    console.log('批量删除字典：', rows)
    
    ElMessage.success('删除成功')
    handleSearch()
    tablePageRef.value?.clearSelection()
  } catch (error) {
    console.error(error)
    ElMessage.error('删除失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.dictionary {
}
</style>
